import React, { useRef, useState } from 'react';
import { useFrame, useThree } from '@react-three/fiber';
import { Text, Box, Sphere, Cylinder, Cone, Plane, RoundedBox } from '@react-three/drei';
import type { DatingProfile } from '../types';
import * as THREE from 'three';

interface CommercialFemaleCharacterProps {
  profile: DatingProfile;
  position: [number, number, number];
  rotation?: [number, number, number];
  onClick: () => void;
  scale?: number;
  isSeated?: boolean;
}

export const CommercialFemaleCharacter3D: React.FC<CommercialFemaleCharacterProps> = ({
  profile,
  position,
  rotation = [0, 0, 0],
  onClick,
  scale = 1,
  isSeated = false
}) => {
  const characterRef = useRef<THREE.Group>(null);
  const [hovered, setHovered] = useState(false);
  const [clicked, setClicked] = useState(false);
  const { camera } = useThree();

  // 优雅的动画系统
  useFrame((state) => {
    if (characterRef.current) {
      // 更细腻的呼吸动画
      const breathIntensity = hovered ? 0.015 : 0.006;
      const breathScale = 1 + Math.sin(state.clock.elapsedTime * 1.5) * breathIntensity;
      characterRef.current.scale.set(scale * breathScale, scale * breathScale, scale * breathScale);
      
      // 优雅的坐姿摆动
      if (isSeated) {
        characterRef.current.rotation.z = Math.sin(state.clock.elapsedTime * 0.4) * 0.015;
        characterRef.current.rotation.y += Math.sin(state.clock.elapsedTime * 0.2) * 0.003;
      }
      
      // 悬停时的优雅转向
      if (hovered && camera) {
        const lookAtTarget = new THREE.Vector3().copy(camera.position);
        lookAtTarget.y = characterRef.current.position.y + 1;
        characterRef.current.lookAt(lookAtTarget);
      }
    }
  });

  const handleClick = () => {
    setClicked(true);
    setTimeout(() => setClicked(false), 400);
    onClick();
  };

  const handlePointerOver = () => {
    setHovered(true);
    document.body.style.cursor = 'pointer';
  };

  const handlePointerOut = () => {
    setHovered(false);
    document.body.style.cursor = 'default';
  };

  // 高端女性配色方案
  const colorScheme = {
    skin: '#F5C6A0',
    hair: '#8B4513',
    dress: '#E53E3E',
    accent: '#FED7D7',
    shoes: '#B91C1C',
    jewelry: '#ECC94B',
    lips: '#E53E3E',
    eyes: '#2D3748',
    blush: '#FBB6CE'
  };

  const sittingOffset = isSeated ? -0.25 : 0;
  
  return (
    <group 
      ref={characterRef}
      position={position}
      rotation={rotation}
      onClick={handleClick}
      onPointerOver={handlePointerOver}
      onPointerOut={handlePointerOut}
    >
      {/* ========== 优雅连衣裙建模 ========== */}
      
      {/* 上身 - 修身设计 */}
      <group position={[0, 0.7 + sittingOffset, 0]}>
        {/* 胸部区域 - 优美曲线 */}
        <Sphere position={[0, 0.05, 0]} args={[0.2, 0.25, 0.18]} castShadow>
          <meshStandardMaterial color={colorScheme.dress} roughness={0.6} metalness={0.1} />
        </Sphere>
        
        {/* 腰部收紧 */}
        <Cylinder position={[0, -0.1, 0]} args={[0.15, 0.18, 0.2]} castShadow>
          <meshStandardMaterial color={colorScheme.dress} roughness={0.6} />
        </Cylinder>
        
        {/* 腰带装饰 */}
        <Cylinder position={[0, -0.15, 0]} args={[0.16, 0.16, 0.04]} castShadow>
          <meshStandardMaterial color={colorScheme.accent} roughness={0.4} />
        </Cylinder>
      </group>

      {/* 裙摆 - A字形设计 */}
      <group position={[0, isSeated ? 0.35 : 0.25, 0]}>
        {/* 主裙摆 */}
        <Cone
          args={[isSeated ? 0.35 : 0.45, isSeated ? 0.25 : 0.4, 12]}
          castShadow
          receiveShadow
        >
          <meshStandardMaterial color={colorScheme.dress} roughness={0.7} />
        </Cone>
        
        {/* 裙摆褶皱细节 */}
        {!isSeated && Array.from({ length: 8 }, (_, i) => {
          const angle = (i * Math.PI * 2) / 8;
          return (
            <Box
              key={i}
              position={[
                Math.cos(angle) * 0.4,
                -0.15,
                Math.sin(angle) * 0.4
              ]}
              args={[0.02, 0.25, 0.02]}
              castShadow
            >
              <meshStandardMaterial color={colorScheme.accent} />
            </Box>
          );
        })}
      </group>

      {/* ========== 精致手臂建模 ========== */}
      
      {/* 左臂 */}
      <group>
        {/* 上臂 - 纤细 */}
        <Cylinder
          position={[-0.28, 0.78 + sittingOffset, 0]}
          args={[0.05, 0.06, 0.3]}
          rotation={[0, 0, isSeated ? 0.4 : 0.15]}
          castShadow
        >
          <meshStandardMaterial color={colorScheme.skin} roughness={0.8} />
        </Cylinder>
        
        {/* 前臂 */}
        <Cylinder
          position={[-0.38, 0.5 + sittingOffset, isSeated ? 0.12 : 0]}
          args={[0.04, 0.05, 0.25]}
          rotation={[0, 0, isSeated ? -0.3 : 0.1]}
          castShadow
        >
          <meshStandardMaterial color={colorScheme.skin} roughness={0.8} />
        </Cylinder>
        
        {/* 左手 - 精致 */}
        <Sphere 
          position={[-0.45, 0.35 + sittingOffset, isSeated ? 0.2 : 0]} 
          args={[0.06]} 
          castShadow
        >
          <meshStandardMaterial color={colorScheme.skin} roughness={0.8} />
        </Sphere>
        
        {/* 指甲 */}
        {Array.from({ length: 5 }, (_, i) => (
          <Box
            key={i}
            position={[
              -0.47 + (i - 2) * 0.008,
              0.37 + sittingOffset,
              isSeated ? 0.25 : 0.05
            ]}
            args={[0.006, 0.003, 0.008]}
            castShadow
          >
            <meshStandardMaterial color="#FFB6C1" metalness={0.6} />
          </Box>
        ))}
      </group>

      {/* 右臂 - 对称设计 */}
      <group>
        <Cylinder
          position={[0.28, 0.78 + sittingOffset, 0]}
          args={[0.05, 0.06, 0.3]}
          rotation={[0, 0, isSeated ? -0.4 : -0.15]}
          castShadow
        >
          <meshStandardMaterial color={colorScheme.skin} roughness={0.8} />
        </Cylinder>
        
        <Cylinder
          position={[0.38, 0.5 + sittingOffset, isSeated ? 0.12 : 0]}
          args={[0.04, 0.05, 0.25]}
          rotation={[0, 0, isSeated ? 0.3 : -0.1]}
          castShadow
        >
          <meshStandardMaterial color={colorScheme.skin} roughness={0.8} />
        </Cylinder>
        
        {/* 右手 + 手镯 */}
        <group position={[0.45, 0.35 + sittingOffset, isSeated ? 0.2 : 0]}>
          <Sphere args={[0.06]} castShadow>
            <meshStandardMaterial color={colorScheme.skin} roughness={0.8} />
          </Sphere>
          
          {/* 精美手镯 */}
          <Cylinder position={[0, 0.04, 0]} args={[0.04, 0.04, 0.02]} rotation={[Math.PI/2, 0, 0]} castShadow>
            <meshStandardMaterial color={colorScheme.jewelry} metalness={0.9} roughness={0.1} />
          </Cylinder>
          
          {/* 宝石装饰 */}
          {Array.from({ length: 6 }, (_, i) => {
            const angle = (i * Math.PI * 2) / 6;
            return (
              <Sphere
                key={i}
                position={[
                  Math.cos(angle) * 0.04,
                  0.04,
                  Math.sin(angle) * 0.04
                ]}
                args={[0.008]}
                castShadow
              >
                <meshStandardMaterial color="#FF69B4" metalness={0.8} roughness={0.2} />
              </Sphere>
            );
          })}
        </group>
      </group>

      {/* ========== 腿部和鞋子 ========== */}
      
      {/* 大腿 - 只在需要时显示 */}
      {!isSeated && (
        <group>
          <Cylinder
            position={[-0.08, 0.08, 0]}
            args={[0.06, 0.07, 0.16]}
            castShadow
          >
            <meshStandardMaterial color={colorScheme.skin} roughness={0.8} />
          </Cylinder>
          
          <Cylinder
            position={[0.08, 0.08, 0]}
            args={[0.06, 0.07, 0.16]}
            castShadow
          >
            <meshStandardMaterial color={colorScheme.skin} roughness={0.8} />
          </Cylinder>
        </group>
      )}

      {/* 高跟鞋 - 更精致 */}
      {!isSeated && (
        <group>
          {/* 左鞋 */}
          <group position={[-0.08, 0.03, 0]}>
            <RoundedBox args={[0.12, 0.06, 0.22]} radius={0.02} castShadow>
              <meshStandardMaterial color={colorScheme.shoes} metalness={0.4} roughness={0.6} />
            </RoundedBox>
            {/* 高跟 */}
            <Cylinder position={[0, -0.08, -0.08]} args={[0.015, 0.02, 0.12]} castShadow>
              <meshStandardMaterial color={colorScheme.shoes} metalness={0.8} roughness={0.2} />
            </Cylinder>
            {/* 鞋带装饰 */}
            <Cylinder position={[0, 0.04, 0]} args={[0.08, 0.08, 0.01]} castShadow>
              <meshStandardMaterial color={colorScheme.accent} />
            </Cylinder>
          </group>
          
          {/* 右鞋 */}
          <group position={[0.08, 0.03, 0]}>
            <RoundedBox args={[0.12, 0.06, 0.22]} radius={0.02} castShadow>
              <meshStandardMaterial color={colorScheme.shoes} metalness={0.4} roughness={0.6} />
            </RoundedBox>
            <Cylinder position={[0, -0.08, -0.08]} args={[0.015, 0.02, 0.12]} castShadow>
              <meshStandardMaterial color={colorScheme.shoes} metalness={0.8} roughness={0.2} />
            </Cylinder>
            <Cylinder position={[0, 0.04, 0]} args={[0.08, 0.08, 0.01]} castShadow>
              <meshStandardMaterial color={colorScheme.accent} />
            </Cylinder>
          </group>
        </group>
      )}

      {/* ========== 精致头部建模 ========== */}
      
      {/* 头部基础 - 柔和曲线 */}
      <Sphere
        position={[0, 1.15 + sittingOffset, 0]}
        args={[0.15, 20, 20]}
        castShadow
      >
        <meshStandardMaterial color={colorScheme.skin} roughness={0.8} metalness={0.0} />
      </Sphere>

      {/* 精致发型 - 分层建模 */}
      <group position={[0, 1.15 + sittingOffset, 0]}>
        {/* 主发型 - 波浪形 */}
        <Sphere position={[0, 0.08, -0.08]} args={[0.18, 16, 16]} castShadow>
          <meshStandardMaterial color={colorScheme.hair} roughness={0.7} />
        </Sphere>
        
        {/* 侧发卷 */}
        <Sphere position={[-0.15, 0.02, -0.12]} args={[0.12, 12, 12]} castShadow>
          <meshStandardMaterial color={colorScheme.hair} roughness={0.7} />
        </Sphere>
        <Sphere position={[0.15, 0.02, -0.12]} args={[0.12, 12, 12]} castShadow>
          <meshStandardMaterial color={colorScheme.hair} roughness={0.7} />
        </Sphere>
        
        {/* 后发 */}
        <Sphere position={[0, -0.05, -0.18]} args={[0.15, 12, 12]} castShadow>
          <meshStandardMaterial color={colorScheme.hair} roughness={0.7} />
        </Sphere>
        
        {/* 发丝细节 */}
        {Array.from({ length: 12 }, (_, i) => {
          const angle = (i * Math.PI * 2) / 12;
          return (
            <Cylinder
              key={i}
              position={[
                Math.cos(angle) * 0.16,
                0.05,
                -0.08 + Math.sin(angle) * 0.16
              ]}
              args={[0.008, 0.005, 0.15]}
              rotation={[Math.random() * 0.5, angle, 0]}
              castShadow
            >
              <meshStandardMaterial color={colorScheme.hair} roughness={0.9} />
            </Cylinder>
          );
        })}
      </group>

      {/* ========== 精美面部特征 ========== */}
      
      {/* 眼部化妆 */}
      <group position={[0, 1.15 + sittingOffset, 0]}>
        {/* 眼窝 - 化妆阴影 */}
        <Sphere position={[-0.05, 0.02, 0.13]} args={[0.025, 8, 8]}>
          <meshStandardMaterial color="#F0E6FF" />
        </Sphere>
        <Sphere position={[0.05, 0.02, 0.13]} args={[0.025, 8, 8]}>
          <meshStandardMaterial color="#F0E6FF" />
        </Sphere>
        
        {/* 眼白 */}
        <Sphere position={[-0.05, 0.02, 0.145]} args={[0.018, 10, 10]}>
          <meshStandardMaterial color="#FFFFFF" />
        </Sphere>
        <Sphere position={[0.05, 0.02, 0.145]} args={[0.018, 10, 10]}>
          <meshStandardMaterial color="#FFFFFF" />
        </Sphere>
        
        {/* 瞳孔 - 更大更亮 */}
        <Sphere position={[-0.05, 0.02, 0.155]} args={[0.01, 8, 8]}>
          <meshStandardMaterial color={colorScheme.eyes} />
        </Sphere>
        <Sphere position={[0.05, 0.02, 0.155]} args={[0.01, 8, 8]}>
          <meshStandardMaterial color={colorScheme.eyes} />
        </Sphere>
        
        {/* 眼部高光 */}
        <Sphere position={[-0.045, 0.025, 0.16]} args={[0.006, 6, 6]}>
          <meshBasicMaterial color="#FFFFFF" />
        </Sphere>
        <Sphere position={[0.055, 0.025, 0.16]} args={[0.006, 6, 6]}>
          <meshBasicMaterial color="#FFFFFF" />
        </Sphere>
      </group>

      {/* 睫毛 */}
      <group position={[0, 1.15 + sittingOffset, 0]}>
        {Array.from({ length: 8 }, (_, i) => (
          <Cylinder
            key={i}
            position={[
              -0.05 + (i - 3.5) * 0.006,
              0.035,
              0.15
            ]}
            args={[0.001, 0.001, 0.01]}
            rotation={[0.3, (i - 3.5) * 0.1, 0]}
            castShadow
          >
            <meshStandardMaterial color="#000000" />
          </Cylinder>
        ))}
        {Array.from({ length: 8 }, (_, i) => (
          <Cylinder
            key={i + 8}
            position={[
              0.05 + (i - 3.5) * 0.006,
              0.035,
              0.15
            ]}
            args={[0.001, 0.001, 0.01]}
            rotation={[0.3, (i - 3.5) * 0.1, 0]}
            castShadow
          >
            <meshStandardMaterial color="#000000" />
          </Cylinder>
        ))}
      </group>

      {/* 眉毛 - 修眉后的形状 */}
      <group position={[0, 1.15 + sittingOffset, 0]}>
        <Box position={[-0.05, 0.06, 0.14]} args={[0.03, 0.006, 0.006]} castShadow>
          <meshStandardMaterial color={colorScheme.hair} />
        </Box>
        <Box position={[0.05, 0.06, 0.14]} args={[0.03, 0.006, 0.006]} castShadow>
          <meshStandardMaterial color={colorScheme.hair} />
        </Box>
      </group>

      {/* 鼻子 - 更小巧 */}
      <Sphere 
        position={[0, 1.13 + sittingOffset, 0.15]} 
        args={[0.01, 8, 8]} 
        castShadow
      >
        <meshStandardMaterial color={colorScheme.skin} />
      </Sphere>

      {/* 嘴唇 - 更丰满和光泽 */}
      <group position={[0, 1.07 + sittingOffset, 0.14]}>
        <Sphere args={[0.025, 0.012, 0.008]} castShadow>
          <meshStandardMaterial color={colorScheme.lips} roughness={0.3} metalness={0.2} />
        </Sphere>
        {/* 唇彩高光 */}
        <Sphere position={[0, 0.003, 0.008]} args={[0.015, 0.006, 0.004]}>
          <meshBasicMaterial color="#FFCCCB" transparent opacity={0.6} />
        </Sphere>
      </group>

      {/* 腮红 */}
      <group position={[0, 1.15 + sittingOffset, 0]}>
        <Sphere position={[-0.08, -0.02, 0.12]} args={[0.02]} transparent>
          <meshStandardMaterial color={colorScheme.blush} transparent opacity={0.4} />
        </Sphere>
        <Sphere position={[0.08, -0.02, 0.12]} args={[0.02]} transparent>
          <meshStandardMaterial color={colorScheme.blush} transparent opacity={0.4} />
        </Sphere>
      </group>

      {/* ========== 精美饰品 ========== */}
      
      {/* 耳环 - 悬垂式 */}
      <group position={[0, 1.15 + sittingOffset, 0]}>
        {/* 左耳环 */}
        <group position={[-0.16, 0, 0]}>
          <Sphere args={[0.015]} castShadow>
            <meshStandardMaterial color={colorScheme.jewelry} metalness={0.9} roughness={0.1} />
          </Sphere>
          <Cylinder position={[0, -0.03, 0]} args={[0.003, 0.003, 0.04]} castShadow>
            <meshStandardMaterial color={colorScheme.jewelry} metalness={0.9} />
          </Cylinder>
          <Sphere position={[0, -0.055, 0]} args={[0.012]} castShadow>
            <meshStandardMaterial color="#E53E3E" metalness={0.7} roughness={0.3} />
          </Sphere>
        </group>
        
        {/* 右耳环 */}
        <group position={[0.16, 0, 0]}>
          <Sphere args={[0.015]} castShadow>
            <meshStandardMaterial color={colorScheme.jewelry} metalness={0.9} roughness={0.1} />
          </Sphere>
          <Cylinder position={[0, -0.03, 0]} args={[0.003, 0.003, 0.04]} castShadow>
            <meshStandardMaterial color={colorScheme.jewelry} metalness={0.9} />
          </Cylinder>
          <Sphere position={[0, -0.055, 0]} args={[0.012]} castShadow>
            <meshStandardMaterial color="#E53E3E" metalness={0.7} roughness={0.3} />
          </Sphere>
        </group>
      </group>

      {/* 项链 - 多层设计 */}
      <group position={[0, 0.9 + sittingOffset, 0.08]}>
        {/* 主链 */}
        <Cylinder args={[0.14, 0.14, 0.008]} castShadow>
          <meshStandardMaterial 
            color={colorScheme.jewelry} 
            metalness={0.9} 
            roughness={0.1}
          />
        </Cylinder>
        
        {/* 吊坠 */}
        <group position={[0, -0.18, 0.01]}>
          <RoundedBox args={[0.025, 0.035, 0.008]} radius={0.005} castShadow>
            <meshStandardMaterial color="#E53E3E" metalness={0.6} roughness={0.4} />
          </RoundedBox>
          <Sphere position={[0, 0, 0.006]} args={[0.008]} castShadow>
            <meshStandardMaterial color="#FFFFFF" metalness={0.8} roughness={0.2} />
          </Sphere>
        </group>
      </group>

      {/* ========== 交互效果 ========== */}
      
      {/* 悬停名字显示 */}
      {hovered && (
        <group position={[0, 1.7 + sittingOffset, 0]}>
          <Text
            fontSize={0.12}
            color="#E53E3E"
            anchorX="center"
            anchorY="middle"
            castShadow
          >
            {profile.name}
          </Text>
          <Text
            position={[0, -0.16, 0]}
            fontSize={0.08}
            color="#4A5568"
            anchorX="center"
            anchorY="middle"
          >
            {profile.age}岁 • {profile.occupation}
          </Text>
        </group>
      )}

      {/* 魅惑光环 */}
      {hovered && (
        <Sphere position={[0, 0.6 + sittingOffset, 0]} args={[1.3]}>
          <meshLambertMaterial
            color="#FFB6C1"
            transparent
            opacity={0.06}
            side={THREE.BackSide}
          />
        </Sphere>
      )}

      {/* 点击爱心特效 */}
      {clicked && (
        <>
          {Array.from({ length: 10 }, (_, i) => (
            <Text
              key={i}
              position={[
                (Math.random() - 0.5) * 2.5,
                0.8 + Math.random() * 1 + sittingOffset,
                (Math.random() - 0.5) * 2.5
              ]}
              fontSize={0.12 + Math.random() * 0.08}
              color="#FF1493"
              anchorX="center"
              anchorY="middle"
            >
              💕
            </Text>
          ))}
        </>
      )}
    </group>
  );
};